<template>
    <div class="main">
        <div class="container">
            <div v-if="bannerList == {}">{{ bannerList }}</div>
            <!-- 首页新闻模块 -->
            <div class="news-box">
                <div :class="index == 0 ? 'news-title' : 'subtitle'"
                    v-for="(item, index) in navigationContextTitle.slice(0, 3)" :key="item.id"
                    @click="goDetails(item.id, item.articleClass)">
                    {{ item.title }}
                </div>

                <!-- 轮播图及右侧要闻聚焦 -->
                <div class="news-details f-c-sb">
                    <!-- 轮播图 -->
                    <div class="news-details-left">
                        <el-carousel height="507px" indicator-position="none">
                            <el-carousel-item v-for="(item, index) in bannerList" :key="index">

                                <img :src="'api' + item.imageUrl" alt="这是一张图片" crossorigin="anonymous"
                                    style="height: 507px; width: 806px;">
                                <div class="banner-text">
                                    <div class="banner-number">
                                        <span style="font-size: 40px;">{{ index + 1 }}</span>
                                        <span> / {{ bannerList.length }}</span>
                                    </div>
                                    {{ item.explains }}

                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <!-- 要闻聚焦 -->
                    <div class="news-details-right">
                        <div class="lable f-c-sb" style="padding: 0px 0px 5px">
                            <div class="left">
                                <div class="lable-text">要闻聚焦</div>
                                <div class="line"></div>
                            </div>
                            <div class="right f-c-st">
                                <div class="right-line"></div>
                                <div class="right-text">每日最新教育资讯</div>
                            </div>
                        </div>

                        <div class="news-details-right-box">
                            <div class="title f-c-c">
                                <div class="title-icon"></div>
                                <div class="title-text" style="width: 310px;" v-for="item in navigationContextFs"
                                    :key="item.id"> {{ item.title }}</div>
                            </div>
                            <div class="f-c-c" style="width: 380px; height: 352px; flex-direction: column;">
                                <div v-for="item in navigationContext" :key="item.id" class="f-c-sb">
                                    <div class="news-dots"></div>
                                    <div class="news-content" @click="goDetails(item.id, item.articleClass)">
                                        <img v-if="item.articleClass == 2" src="../assets/images/video-icon.png" alt=""
                                            class="el-image__inner" style="width: 20px; height: 15px; object-fit: cover" />
                                        {{ item.title }}
                                    </div>
                                </div>
                            </div>
                            <div class="f-c-c" style="margin-top: 15px;">
                                <button class="news-details-btn f-c-c" @click="getpush('要闻聚焦')">查看更多</button>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <!-- 广告板块 -->
            <div class="container advertise" style="margin-top: 10px;">
                <div class="el-image" style="width: 1200px;height: 120px;">
                    <img src="/api/profile/upload/2022/03/04/82282d63-8d79-4046-9f02-46e60060f802.png" alt=""
                        style="width: 100%;height: 100%;">
                </div>
            </div>

            <!-- 热点专题模块 -->
            <news-box title="热点专题" subTitle="全景解读 深度关注" :dataList="navigationList"></news-box>

            <!-- 直播视频模块 -->
            <div class="container">
                <div class="video">
                    <div class="video-box f-c-sb">
                        <div class="video-left-icon a-end">
                            <div style="width: 180px; height: 30px;">
                                <img src="../assets//images/btzzft.png" alt="">
                            </div>
                        </div>
                        <div class="f-c-c" @click="getpush('直播访谈')">
                            <div class="video-right-text ">
                                查看更多
                            </div>
                            <div>
                                <img src="../assets/images/title-right.png" alt="">
                            </div>
                        </div>

                    </div>
                    <div class="video-step f-c-c">
                        <div class="point"></div>
                        <div class="video-line"></div>
                        <div class="point"></div>
                        <div class="video-line"></div>
                        <div class="point"></div>
                        <div class="video-line"></div>
                        <div class="point"></div>
                    </div>

                    <div class="video-item f-c-st">
                        <div class="return-visit f-c-sb">
                            <div class="visit-item" v-for="item in navigationContextPlayer" :key="item.id"
                                @click="getpushvioed(item.id)">
                                <div class="el-img" style="width: 252px;height: 142px;">
                                    <img :src="'/api' + item.image" alt=""
                                        style="object-fit: cover;width: 252px;height: 142px;">
                                </div>
                                <div class="return-visit-lable">
                                    {{ item.title }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 六大内容板块模块 -->
            <div class="container">
                <div style="margin: 20px 0px; ">
                    <div class="el-row">
                        <module v-for="item in moduleDatas" :key="item.id" :dataList="item.dataList" :imgUrl="item.imgUrl"
                            :title="item.title">
                        </module>
                    </div>
                </div>
            </div>


            <!-- 广告区域 -->
            <div class="container advertise" style="margin-top: 45px;">
                <div class="el-image">
                    <img src="../assets//images/advertise.png" alt=""
                        style="object-fit: cover;width: 1200px;height: 120px;">
                </div>
            </div>
        </div>

        <!-- 专题栏目 -->
        <div class="container">
           <news-box title="专题·栏目" subTitle="自办原创本土节目" :dataList="topicData"></news-box>
        </div>

        <!-- 院校信息板块 -->
        <div class="school">
            <div class="container f-c-sb">
                <div class="school-left">
                    <div class="lable f-c-sb">
                        <div class="f-c-st">
                            <div class="left">
                                <div class="lable-text">院校信息</div>
                                <div class="line"></div>
                            </div>
                            <div class="right f-c-st">
                                <div class="right-line"></div>
                                <div class="right-text">展现校园风采 传承大学之道</div>
                            </div>
                        </div>
                        <div class="view-more f-c-c" @click="toSchool">
                            <span>查看更多</span>
                        </div>
                    </div>
                    <div class="school-box">
                        <div class="el-carousel_container" style="height: 480px;">
                            <div class="school-item f-c-sb" v-for="item in allSchool" :key="item.id" @click="gotoshool(item.id)">
                                <div>
                                    <img :src="'/api' + item.firstImage" alt="" style="width: 248px;height: 141px;">
                                </div>
                                <div class="school-item-right">
                                    <div class="f-c-sb">
                                        <div>{{ item.schoolName }}</div>
                                        <img src="../assets/images/title-right.png" alt="" style="margin-right: 20px;">
                                    </div>
                                    <div class="school-item-line"></div>
                                    <div class="school-item-text">{{ item.synopsis }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="school-right">
                    <div class="lable f-c-sb">
                        <div class="f-c-st">
                            <div class="left">
                                <div class="lable-text">空中课堂</div>
                                <div class="line"></div>
                            </div>
                            <div class="right f-c-st">
                                <div class="right-line"></div>
                                <div class="right-text">云教学 让知识传播更广泛</div>
                            </div>
                        </div>
                        <div class="view-more f-c-c" @click="getpush('空中课堂')">
                            <span>查看更多</span>
                        </div>
                    </div>
                    <div class="classroom" style="height: 445px;margin-bottom: 28px;">
                        <div class="grid">
                            <div class="school-item " v-for="item in navigationContextSkyClass" :key="item.id">
                                <div style="position: relative;" @click="getpushvioed(item.id)">
                                    <div class="el-image" style="width: 270px; height: 150px;object-fit: cover;">
                                        <img :src="'/api' + item.image" alt="" style=" width: 100%; height: 100%;">
                                    </div>
                                    <div class="classroom-item-text">{{ item.title }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="f-c-st" style="flex-direction: column; padding-right: 60px;">
                            <div class="school-info f-c-sb" v-for="item in navigationContextSkyClassOther" :key="item.id">
                                <div class="info-circle"></div>
                                <div class="info-text" @click="getpushvioed(item.id)">{{ item.title }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <news-box title="微视频" subTitle="讲好我们自己的故事" :dataList="navigationContextVideo"></news-box>
        </div>
    </div>
</template>

<script>

import {
    getNavigationContext, getAllBannerList, getAllNavigationList, getAllSchool
}
    from '../api/index'
import NewsBox from '../components/news-box.vue'
import Module from '../components/module.vue'
export default {
    components: {
        NewsBox,
        Module
    },
    data() {
        return {
            navigationContextTitle: [],
            navigationContext: [],
            navigationContextFs: [],
            navigationList: [],
            navigationContextPlayer: [],
            navigationContextSkyClass: [],
            navigationContextSkyClassOther: [],
            allSchool: [],
            navigationContextVideo: [],
            topicData:[{
                title:'福建教育报道',
                image:'../../src/assets/images/fjjy.png'
            },{
                title:'乡约科普',
                image:'../../src/assets/images/xckp.jpg'
            },{
                title:'福娃过大年',
                image:'../../src/assets/images/fwgdn.png'
            },],
            bannerList: '',
            // 请求参数
            params: {
                pageNum: 1,
                pageSize: 3,
                isAsc: 'desc',
                orderByColumn: 'createTime'
            },
            moduleDatas: [{
                id: 1,
                title: '校园',
                imgUrl: '../../src/assets/images/xiaoyuan.jpg',
                dataList: [],
            }, {
                id: 2,
                title: 'FETV',
                imgUrl: '../../src/assets/images/FETv.jpg',
                dataList: [],
            }, {
                id: 3,
                title: '招考',
                imgUrl: '../../src/assets/images/zhaokao.jpg',
                dataList: [],
            }, {
                id: 4,
                title: '职场',
                imgUrl: '../../src/assets/images/zhichang.jpg',
                dataList: [],
            }, {
                id: 5,
                title: '家长',
                imgUrl: '../../src/assets/images/jiazhang.jpg',
                dataList: [],
            }, {
                id: 6,
                title: '师说',
                imgUrl: '../../src/assets/images/shishuo.jpg',
                dataList: [],
            },]
        }



    },
    methods: {
        // 要闻焦距的跳转
        goDetails(value, art) {
            if (art != 2) {
                this.$router.push({ path: '/NewsDetails', query: { tid: value } })
            } else if (art == 2) {
                this.$router.push({ path: '/ClassVideo', query: { tid: value } })
            }
        },
        // 热点专题的跳转，跟导航页的跳转一样
        getpush(value) {
            this.$router.push({ path: '/News', query: { name: value } })
        },
        // 跳转到视频播放页面
        getpushvioed(value, title_text) {
            this.$router.push({ path: '/ClassVideo', query: { tid: value } })
        },
        // 跳转到学校列表页面
        toSchool(){
            this.$router.push({path:'/School'})
        },
        // 跳转到学校信息页面
        gotoshool(id) {
            this.$router.push({path:'/Introduction',query:{schoolId:id}})
        }
    },
    mounted() {
        let data = this.params
        data.title = '头条新闻'
        // 首页标题与副标题
        getNavigationContext(data).then(async res => {
            this.navigationContextTitle = await res.rows

        })
        // 首页轮播图
        getAllBannerList().then(res => {
            // console.log(bannerListBase + res.data.data[0].imageUrl);
            this.bannerList = res.data

        })
        // 首页要闻聚焦
        data.title = '要闻聚焦'
        data.pageSize = 12
        getNavigationContext(data).then(async res => {
            await res.rows.forEach((element, index) => {
                if (index == 0) {
                    this.navigationContextFs.push(element)
                } else {
                    this.navigationContext.push(element)
                }
            });
        }).catch(error => {
            console.log(error);
        })

        // 热点专题
        getAllNavigationList({
            recommend: 1,
            isAsc: 'asc'
        }).then(res => {
            this.navigationList = res.rows
        }).catch(error => {
            console.log(error);
        })
        //直播访谈
        data.title = '直播访谈'
        data.pageSize = 4
        getNavigationContext(data).then(res => {
            this.navigationContextPlayer = res.rows
            // this.navigationContextPlayer=res.data.rows

        })
        // 六大板块
        // 校园
        data.orderByColumn = 'des'
        data.pageSize = 10
        data.title = '校园'
        getNavigationContext(data).then(res => {
            this.moduleDatas[0].dataList = res.rows
        })
        // FETV
        data.title = 'FETV'
        getNavigationContext(data).then(res => {
            this.moduleDatas[1].dataList = res.rows
        })
        // 招考
        data.title = '招考'
        getNavigationContext(data).then(res => {
            this.moduleDatas[2].dataList = res.rows
        })
        // 职场
        data.title = '职场'
        getNavigationContext(data).then(res => {
            this.moduleDatas[3].dataList = res.rows
        })
        // 家长
        data.title = '家长'
        getNavigationContext(data).then(res => {
            this.moduleDatas[4].dataList = res.rows
        })
        // 师说
        data.title = '师说'
        getNavigationContext(data).then(res => {
            this.moduleDatas[5].dataList = res.rows
        })
        //院校信息
        getAllSchool({
            pageNum: 1,
            pageSize: 3
        }).then(res => {
            this.allSchool = res.data

        })
        //空中课堂
        data.title = '空中课堂'
        data.pageSize = 7
        getNavigationContext(data).then(res => {
            res.rows.forEach((element, index) => {

                if (index < 4) {
                    this.navigationContextSkyClass.push(element)


                } else {
                    this.navigationContextSkyClassOther.push(element)

                }
            })

        })
        //微视频
        data.title = '微视频'
        data.pageSize = 6
        getNavigationContext(data).then(res => {
            this.navigationContextVideo = res.rows
            // this.navigationContextPlayer=res.data.rows

        })
    }
}



</script>
<style  lang="less" scoped>
.main {

    .container {
        width: 1200px;
        margin: 0 auto;


        // 首页新闻模块
        .news-box {
            width: 1200px;
            height: 660px;


            .news-title {
                font-size: 34px;
                font-family: NotoSansHans-Bold;
                font-weight: bold;
                color: #ba0825;
                line-height: 68px;
                text-align: center;
                cursor: pointer;
            }

            .subtitle {
                font-size: 18px;
                font-family: NotoSansHans-Regular;
                font-weight: 400;
                color: #000000;
                line-height: 35px;
                text-align: center;
                cursor: pointer;
            }

            // 轮播图及右侧要闻聚焦 
            .news-details {
                width: 100%;
                margin: 15px 0;

                .news-details-left {
                    position: relative;
                    width: 806px;
                    height: 507px;
                    position: relative;

                    .banner-text {
                        position: absolute;
                        bottom: 0;
                        width: calc(100% - 160px);
                        padding: 0 97px;
                        height: 70px;
                        background: #000000;
                        opacity: 0.45;
                        font-size: 21px;
                        font-family: NotoSansHans-Bold;
                        font-weight: bold;
                        color: #ffffff;
                        line-height: 70px;
                        text-align: center;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;

                        .banner-number {
                            position: absolute;
                            bottom: 0;
                            left: 35px;
                        }
                    }

                }

                .news-details-right {
                    width: 380px;
                    height: 507px;

                    .lable {
                        height: 40px;

                        .left {
                            .lable-text {
                                height: 24px;
                                font-size: 20px;
                                font-family: NotoSansHans-Bold;
                                font-weight: bold;
                                color: #000000;
                                margin-bottom: 10px;
                            }

                            .line {
                                height: 4px;
                                background: #ba0825;
                            }

                        }

                        .right-line {
                            width: 90px;
                            height: 2px;
                            margin: auto 0;
                            background: #eeeeee;
                        }

                        .right-text {
                            margin-left: 5px;
                            font-size: 16px;
                            font-family: Noto Sans S Chinese;
                            font-weight: 300;
                            font-style: italic;
                            color: #777777;
                            line-height: 40px;
                        }
                    }

                    .news-details-right-box {
                        margin-top: 5px;
                        padding-top: 10px;
                        width: 100%;
                        height: 448px;
                        background: #ffffff;
                        -webkit-box-shadow: 0px 6px 10px 0px rgba(115, 124, 139, 0.15);
                        box-shadow: 0px 6px 10px 0px rgba(115, 124, 139, 0.15);

                        .title {

                            font-size: 16px;
                            font-family: NotoSansHans-Bold;
                            font-weight: bold;
                            color: #000000;
                            line-height: 35px;

                            .title-text {
                                cursor: pointer;
                                font-size: 16px;
                                font-family: NotoSansHans-Bold;
                                font-weight: bold;
                                color: #000000;
                                line-height: 35px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            }

                            .title-text:hover {
                                color: #ff0108;
                            }

                            .title-icon {
                                width: 22px;
                                height: 24px;
                                font-size: 14px;
                                margin-right: 8px;
                                color: #ffffff;
                                background-repeat: no-repeat;
                                background-size: contain;
                                background-position: center;
                                background-image: url('../assets//images/title-icon.png');
                            }
                        }

                        .news-dots {
                            width: 6px;
                            height: 6px;
                            background: #ba0825;
                            border-radius: 50%;
                            margin: 0 13px 0 11px;
                        }

                        .el-image__inner {
                            position: relative;
                            display: inline-block;
                            overflow: hidden;
                            vertical-align: top;
                            margin-top: 8.5px;
                            margin-right: 10px;
                        }

                        .news-content {
                            width: 315px;
                            cursor: pointer;
                            font-size: 14px;
                            font-family: NotoSansHans-Regular;
                            font-weight: 300;
                            color: #000000;
                            line-height: 32px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }

                        .news-content:hover {
                            color: #ff0108;
                        }
                    }

                    .news-details-btn {
                        width: 63px;
                        height: 23px;
                        border: 0;
                        background: #f4f4f4;
                        border-radius: 15px;
                        font-size: 11px;
                        font-family: NotoSansHans-Regular;
                        font-weight: 400;
                        color: #2a2a2a;
                        cursor: pointer;
                    }
                }
            }
        }


        // 广告板块
        .advertise {
            margin-top: 10px;
            position: relative;

            .el-image {
                position: relative;
                display: inline-block;
                overflow: hidden;
            }
        }

        // 直播视频模块
        .container {
            .video {
                box-sizing: border-box;
                width: 1200px;
                height: 356px;
                padding: 30px 50px 0 50px;
                background: -webkit-gradient(linear, left bottom, left top, from(#454344), to(#070506));
                background: linear-gradient(0deg, #454344 0%, #070506 100%);

                .video-box {



                    .video-right-text {
                        cursor: pointer;
                        margin-right: 6px;
                        font-size: 11px;
                        font-family: Noto Sans S Chinese;
                        font-weight: 400;
                        color: #ffdfaf;
                        line-height: 40px;
                    }
                }

                .video-step {
                    margin-bottom: 20px;
                    margin-top: 23px;

                    .point {
                        width: 15px;
                        height: 15px;
                        background: #434142;
                        transform: rotate(45deg);
                    }

                    .video-line {
                        width: 295px;
                        height: 1px;
                        background: #434142;
                    }
                }

                .video-item {
                    .return-visit {
                        width: 100%;

                        .return-visit-item {
                            width: 252px;
                            height: 141px;

                            .el-image {
                                position: relative;
                                display: inline-block;
                                overflow: hidden;
                            }
                        }

                        .return-visit-lable {
                            width: 238px;
                            height: 80px;
                            margin-left: 14px;
                            font-size: 14px;
                            font-family: NotoSansHans-Regular;
                            font-weight: 300;
                            color: #ffffff;
                            line-height: 40px;
                        }

                        .return-visit-lable:hover {
                            color: red;
                        }
                    }
                }
            }
        }

        // 六大板块
        .container {
            width: 1200px;
            margin: 0 auto;

            .el-row {
                margin-left: 0px;
                margin-right: -55px;
                box-sizing: border-box;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr;

            }
        }

        // 广告区域
        .advertise {
            position: relative;

            .el-image {

                position: relative;
                display: inline-block;
                overflow: hidden;
            }
        }




    }

    // 学校信息
    .school {
        width: 100vpx;
        padding-top: 30px;
        background: #f8f8f8;

        .container {
            width: 1200px;
            margin: 0 auto;

            .lable {
                height: 40px;
                padding: 23px 0;


                .lable-text {
                    height: 24px;
                    font-size: 20px;
                    font-family: NotoSansHans-Bold;
                    font-weight: bold;
                    color: #000000;
                    margin-bottom: 10px;
                }

                .line {
                    height: 4px;
                    background: #ba0825;
                }


                .right {
                    .right-line {
                        width: 90px;
                        height: 2px;
                        margin: auto 0;
                        background: #eeeeee;
                    }

                    .right-text {
                        margin-left: 5px;
                        font-size: 16px;
                        font-family: Noto Sans S Chinese;
                        font-weight: 300;
                        font-style: italic;
                        color: #777777;
                        line-height: 40px;
                    }
                }

                .view-more {
                    width: 65px;
                    height: 23px;
                    background: #ededed;
                    border-radius: 15px;
                    font-size: 11px;
                    font-family: NotoSansHans-Regular;
                    font-weight: 400;
                    color: #2A2A2A;
                    cursor: pointer;
                }
            }

            .school-left {
                .school-box {
                    padding-top: 5px;
                    width: 584px;
                    height: 480px;
                    margin-top: 25px;
                    border-radius: 6px;

                    .el-carousel_container {
                        position: relative;

                        .school-item {
                            width: 584px;
                            height: 141px;
                            background: #ffffff;
                            border-radius: 6px;
                            margin-bottom: 11px;

                            .school-item-right {
                                width: 317px;

                                .school-item-line {
                                    width: 253px;
                                    height: 1px;
                                    background: #eeeeee;
                                    margin: 10px 0;
                                }

                                .school-item-text {
                                    width: 266px;
                                    font-size: 14px;
                                    font-family: NotoSansHans-Regular;
                                    font-weight: 300;
                                    color: #777777;
                                    line-height: 40px;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 1;
                                    overflow: hidden;
                                }
                            }
                        }

                    }
                }
            }

            .school-right {
                .classroom {
                    padding-top: 5px;
                    width: 584px;
                    height: 440px;
                    margin-top: 25px;
                    background: #ffffff;
                    border-radius: 6px;

                    .grid {
                        width: 584px;
                        height: 315px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -ms-flex-pack: distribute;
                        justify-content: space-around;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -ms-flex-wrap: wrap;
                        flex-wrap: wrap;

                        .school-item {
                            width: 270px;
                            height: 150px;

                            .el-image {
                                position: relative;
                                display: inline-block;
                                overflow: hidden;

                            }

                            .classroom-item-text {
                                position: absolute;
                                width: 260px;
                                font-size: 16px;
                                padding: 0 5px;
                                font-family: NotoSansHans-Regular;
                                font-weight: 300;
                                color: #ffffff;
                                line-height: 40px;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                                bottom: 0;
                            }

                            .classroom-item-text:hover {
                                cursor: pointer;
                                color: #ff0108;
                            }
                        }
                    }

                    .school-info {


                        .info-circle {
                            width: 6px;
                            height: 6px;
                            border: 3px solid #e5e5e5;
                            border-radius: 50%;
                            margin-right: 6px;
                        }

                        .info-text {
                            width: 475px;
                            font-size: 15px;
                            font-family: NotoSansHans-Regular;
                            font-weight: bold;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            color: #000000;
                            line-height: 40px;

                        }

                        .info-text:hover {
                            color: #ff0108;
                            cursor: pointer;
                        }
                    }
                }
            }

        }
    }
}
</style>